<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>内联模板</title>

<!--一个基于flexbox的布局类库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">


<style type="text/css">

body {

    padding-top: 40px;

}

.blue {

  background-color: blue;
  color:white;
}

</style>

</head>



<body>


  <p class="blue">有时候为了快速灵活封装组件,可以使用内联模板的方式封装组件,就是组件不含有模板内容,模板内容在外面</p>
<p  class="blue">关键字:inline-template</p>
<div id="root" class="container">
  
<!-- inline-template -->
<progress-view inline-template> 

  <!-- 模板下面只能有一个子节点,所以需要加个div -->
  <div>
    <h1>当前进度{{ progress }}% </h1>
    <button @click="progress+=5">修改进度</button>
  </div>

</progress-view>



</div>



<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>

<!--
    引入组件
  -->
<script src="./exerciseJS/inline_template.js" >  </script>

  </body>
</html>
